<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>QRCODE</title>
		<script src="jquery/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/grid.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/version.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/detector.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/formatinf.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/errorlevel.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/bitmat.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/datablock.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/bmparser.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/datamask.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/rsdecoder.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/gf256poly.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/gf256.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/decoder.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/qrcode.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/findpat.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/alignpat.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/databr.js" charset="utf-8"></script>

		<style type="text/css">
			body{
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				border: none;
				overflow: hidden;
				font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif, "微软雅黑" !important;
				font-size: 16px;
				-webkit-overflow-scrolling: touch;
				 display: flex;
			    justify-content: center;
			    flex-direction: column;
			}
			/*div 四个边角样式 start*/
			
			.container {
				position: relative;
			}
			
			.container span:nth-child(1) {
				position: absolute;
				left: 0px;
				top: 0px;
				padding: 4px;
				border-style: solid;
				border-color: #25daf1;
				border-width: 4px 0 0 4px;
				z-index: 200;
			}
			
			.container span:nth-child(2) {
				position: absolute;
				right: 0px;
				top: 0px;
				padding: 4px;
				border-style: solid;
				border-color: #25daf1;
				border-width: 4px 4px 0 0;
			}
			
			.container span:nth-child(3) {
				position: absolute;
				right: 0px;
				bottom: 0px;
				padding: 4px;
				border-style: solid;
				border-color: #25daf1;
				border-width: 0 4px 4px 0;
			}
			
			.container span:nth-child(4) {
				position: absolute;
				left: 0px;
				bottom: 0px;
				padding: 4px;
				border-style: solid;
				border-color: #25daf1;
				border-width: 0 0 4px 4px;
			}
			/*div 四个边角样式 end*/
		</style>

		<script type="text/javascript">
			var bodyHeight = document.documentElement.clientHeight;
			var bodyWidth = document.documentElement.clientWidth;
			var interval = null;
			var gCtx = null;
			var gCanvas = null;

			var imageData = null;
			var ii = 0;
			var jj = 0;
			var c = 0;

			function dragenter(e) {
				e.stopPropagation();
				e.preventDefault();
			}

			function dragover(e) {
				e.stopPropagation();
				e.preventDefault();
			}

			function drop(e) {
				e.stopPropagation();
				e.preventDefault();

				var dt = e.dataTransfer;
				var files = dt.files;

				handleFiles(files);
			}

			function handleFiles(f) {
				var o = [];
				for(var i = 0; i < f.length; i++) {
					var reader = new FileReader();

					reader.onload = (function(theFile) {
						return function(e) {
							qrcode.decode(e.target.result);
						};
					})(f[i]);

					// Read in the image file as a data URL.
					reader.readAsDataURL(f[i]);
				}
			}

			/**
			 * 函数回调
			 * @param {Object} a
			 */
			function read(result) {
				//TODO 此次进行结果处理
				alert("扫描结果："+result);
			}

			function load() {
				initCanvas(320, 240);
				qrcode.callback = read;
				//qrcode.decode("demo1.png");
				//600毫秒进行一此解析
				interval = setInterval(function() {
					captureToCanvas();
				}, 600);
			}

			function initCanvas(ww, hh) {
				gCanvas = document.getElementById("qr-canvas");
				gCanvas.addEventListener("dragenter", dragenter, false);
				gCanvas.addEventListener("dragover", dragover, false);
				gCanvas.addEventListener("drop", drop, false);
				var w = ww;
				var h = hh;
				gCanvas.style.width = w + "px";
				gCanvas.style.height = h + "px";
				gCanvas.width = w;
				gCanvas.height = h;
				gCtx = gCanvas.getContext("2d");
				gCtx.clearRect(0, 0, w, h);
				imageData = gCtx.getImageData(0, 0, 320, 240);
			}

			function passLine(stringPixels) {
				//a = (intVal >> 24) & 0xff;

				var coll = stringPixels.split("-");

				for(var i = 0; i < 320; i++) {
					var intVal = parseInt(coll[i]);
					r = (intVal >> 16) & 0xff;
					g = (intVal >> 8) & 0xff;
					b = (intVal) & 0xff;
					imageData.data[c + 0] = r;
					imageData.data[c + 1] = g;
					imageData.data[c + 2] = b;
					imageData.data[c + 3] = 255;
					c += 4;
				}

				if(c >= 320 * 240 * 4) {
					c = 0;
					gCtx.putImageData(imageData, 0, 0);
				}
			}

			function captureToCanvas() {
				//debugger;
				flash = document.getElementById("embedflash");
				flash.ccCapture();
				qrcode.decode();
			}

			$(document).ready(function() {
				initStye();
			});

			//初始化样式
			function initStye() {
				//alert((bodyHeight - $(".mainDiv").height())/2 + "px");
				$(".mainDiv").css({
					'margin': (bodyHeight - $(".mainDiv").height())/2 + "px " + (bodyWidth - $(".mainDiv").width())/2 + "px "
				});
			}
		</script>

	</head>

	<body onload="load()">
		<div class="mainDiv" style="width: 320px;height: 300px;">
			<div class="container" style="width: 100%;height: 240px;">
				<span></span>
		        <span></span>
		        <span></span>
		        <span></span>
				<object id="iembedflash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="js/swflash.cab#version=7,0,0,0" width="320" height="240">
			  		<param name="movie" value="camcanvas.swf" />
			  		<param name="quality" value="high" />
					<param name="allowScriptAccess" value="always" />
			  		<embed  allowScriptAccess="always"  id="embedflash" src="js/camcanvas.swf" quality="high" width="320" height="240" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" mayscript="true"  />
			    </object>
			</div>
			<div style="width: 100%;height: 60px;line-height: 60px;text-align: center;">
			    	请将二维码/条码放入框内，即可自动扫描
			</div>

			<canvas id="qr-canvas" width="320" height="240" style="display: none;"></canvas>

			<!--<button onclick="captureToCanvas()">Capture</button><br>-->
		</div>

	</body>

</html>